<template>
  <div class="footer">
      <div class="m-ft">
          <div class="copy">
            <p class="link">
                <a href="//st.music.163.com/official-terms/service" target="_blank" class="item">服务条款</a>
                <span class="line">|</span>
                <a href="//st.music.163.com/official-terms/privacy" target="_blank" class="item">隐私政策</a>
                <span class="line">|</span>
                <a href="//st.music.163.com/official-terms/children" target="_blank" class="item">儿童隐私政策</a>
                <span class="line">|</span>
                <a href="//music.163.com/st/staticdeal/complaints.html" target="_blank" class="item">版权投诉指引</a>
                <span class="line">|</span>
                <a class="item">意见反馈</a>
                <span class="line">|</span>
                <a href="https://music.163.com/ui/resource" class="item">广告合作</a>
            </p>
            <div class="right">
                <span class="sep">网易公司版权所有©1997-2022</span>
                <span class="span">杭州乐读科技有限公司运营：</span>
                <a href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png" target="_blank" class="alink s-fc3">浙网文[2021] 1186-054号</a>
            </div>
            <div class="contact">
                <span class="sep">违法和不良信息举报电话：0571-89853516</span>
                <span class="span">举报邮箱：</span>
                <a class="alink" href="mailto:ncm5990@163.com">ncm5990@163.com</a>
            </div>
            <div class="right">
                <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="noopener noreferrer" target="_blank" class="alink s-fc3">粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564" rel="noopener noreferrer" target="_blank" class="alink s-fc3 police-link">
                    <span class="police-logo"></span>
                    <span class="police-text">浙公网安备 33010902002564号</span>
                </a>
            </div>
          </div>
          <ul class="enter f-fr">
            <li class="unit">
                <a class="logo logonew logo-amped f-tid" href="https://web-amped.music.163.com/" target="_blank"></a>
                <span class="tt tt-amped"></span>
            </li>
            <li class="unit">
                <a class="logo logonew logo-auth f-tid" href="//music.163.com/st/userbasic#/auth" target="_blank"></a>
                <span class="tt tt-auth"></span>
            </li>
            <li class="unit">
                <a class="logo logonew logo-musician f-tid" href="//music.163.com/musician/artist" target="_blank"></a>
                <span class="tt tt-musician"></span>
            </li>
            <li class="unit">
                <a class="logo logonew logo-reward f-tid" href="//music.163.com/web/reward" target="_blank"></a>
                <span class="tt tt-reward"></span>
            </li>
            <li class="unit">
                <a class="logo logonew logo-cash f-tid" href="//music.163.com/st/ncreator/revenue-plan" target="_blank"></a>
                <span class="tt tt-cash"></span>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
    name:'myfooter',
}
</script>

<style lang = "less" scoped>
    .footer{
        height: 173px;
        width: 100%;
        border-top: 1px solid #d3d3d3;
        background: #f2f2f2;
        
        .m-ft{
            width: 980px;
            height: 115px;
            margin: 0 auto;

            .copy{
                width: 520px;
                height: 115px;
                padding-top: 15px;
                float: left;
                .link{
                    width: 520px;
                    height: 24px;
                    font-size: 12px;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    a{
                        line-height: 24px;
                        color: #999;
                        &:hover{
                            color:#999;
                            text-decoration: underline;
                        }
                    }
                    .line{
                        margin: 0 11px 0 11px;
                        color: #c2c2c2;
                        line-height: 24px;
                        font-size: 12px;
                    }
                    
                }

                .right{
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    line-height: 24px;
                    .sep{
                        margin-right: 10px;
                    }

                    a:hover{
                        color: #333;
                        text-decoration: underline;
                    }


                    .alink{
                        margin-right: 10px;
                        .police-logo{
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            background: url('https://s2.music.126.net/style/web2/img/3rd/police.png?9be4d50696870b370eee47006d6f8b89') no-repeat 0 0;
                            background-size: 15px 15px;
                        }
                    }
                }

                .contact{
                    line-height: 24px;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;

                    .sep{
                        margin-right: 10px;
                    }

                    a:hover{
                        color: #333;
                        text-decoration: underline;
                    }
                }
            }

            .enter{
                font-size: 12px;
                color: #333;
                font-family: Arial, Helvetica, sans-serif;
                -webkit-text-size-adjust: none;
                word-wrap: break-word;
                word-break: break-word;
                padding: 0;
                margin: 0;
                float: right;
                width: 420px;
                margin-top: 33px;
                .unit{
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    word-wrap: break-word;
                    word-break: break-word;
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    float: left;
                    width: 60px;
                    height: 70px;
                    text-align: center;
                    color: #666;
                    margin-left: 0;
                    margin-right: 24px;
                    .logo-amped{
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        text-decoration: none;
                        cursor: pointer;
                        text-indent: -9999px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        background: url('./images/foot_enter_new.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: -63px -456.5px;
                    }
                    .tt-amped{
                        font-size: 12px;
                        background: url('./images/foot_enter_tt.png') no-repeat;
                        background-size: 180px 139px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        height: 14px;
                        background-position: 0 -108px;
                        margin-left: -6px;
                        width: 72px;
                    }
                    .logo-auth{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        text-decoration: none;
                        color: #333;
                        cursor: pointer;
                        text-indent: -9999px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        background: url('./images/foot_enter_new.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: -63px -101px;
                    }
                    .tt-auth{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        color: #666;
                        background: url('./images/foot_enter_tt.png') no-repeat;
                        background-size: 180px 139px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        width: 52px;
                        height: 14px;
                        background-position: -1px -91px;
                    }
                    .logo-musician{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        text-decoration: none;
                        color: #333;
                        cursor: pointer;
                        text-indent: -9999px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        background: url('./images/foot_enter_new.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: 0 0;
                    }
                    .tt-musician{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        color: #666;
                        background: url('./images/foot_enter_tt.png') no-repeat;
                        background-size: 180px 139px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        width: 52px;
                        height: 14px;
                        background-position: 0 0;
                    }
                    .logo-reward{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        text-decoration: none;
                        color: #333;
                        cursor: pointer;
                        text-indent: -9999px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        background: url('./images/foot_enter_new.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: -60px -50px;
                    }
                    .tt-reward{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        color: #666;
                        background: url('./images/foot_enter_tt.png') no-repeat;
                        background-size: 180px 139px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        width: 52px;
                        height: 14px;
                        background-position: 0 -54px;
                    }
                    .logo-cash{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        text-decoration: none;
                        color: #333;
                        cursor: pointer;
                        text-indent: -9999px;
                        display: block;
                        float: none;
                        width: 50px;
                        height: 45px;
                        margin: 0 auto;
                        background: url('./images/foot_enter_new.png') no-repeat;
                        background-size: 110px 552px;
                        background-position: 0 -101px;
                    }
                    .tt-cash{
                        font-size: 12px;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        word-wrap: break-word;
                        word-break: break-word;
                        list-style: none;
                        text-align: center;
                        color: #666;
                        background: url('./images/foot_enter_tt.png') no-repeat;
                        background-size: 180px 139px;
                        display: inline-block;
                        margin: 5px 5px 0;
                        width: 52px;
                        height: 14px;
                        background-position: -1px -72px;
                    }
                }
            }
        }
        
    }
</style>